<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <button @click="fn">开始</button>
    <button @click="fn1">停止</button>
    <h3>{{ msg }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我拿Buff,谢谢~",
      ins: null,
    };
  },

  created() {},

  methods: {
    fn() {
      if (this.ins !== null) return;
      this.ins = setInterval(() => {
        const one = this.msg.slice(0, 1);
        const two = this.msg.slice(1);
        this.msg = two + one;
      }, 300);
    },
    fn1() {
      clearInterval(this.ins);
      this.ins = null;
    },
  },
};
</script>

<style scoped lang="less"></style>
